<template>
    <el-tabs v-model="activeName"  @tab-click="handleClick" :tab-position="tabPosition">
        <el-tab-pane label="餐桌列表" name="first">

<!--            编辑餐桌的模态框-->
            <el-dialog
                    title="编辑餐桌"
                    :visible.sync="dialogVisible3"
                    width="30%"
            >
                <el-form>
                    <el-form-item label="餐桌类型：" prop="ruType">
                        <el-select v-model="bjCZ.type" placeholder="请选择" >
                            <el-option
                                    v-for="item in czType"
                                    :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="餐桌名称：:" prop="name">
                        <el-col :span="12" :offset="1">
                            <el-input v-model="bjCZ.name"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="桌号：:" prop="name">
                        <el-col :span="12" :offset="1">
                            <el-input
                                    v-model="bjCZ.id"
                                    :disabled="true">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取 消</el-button>
                    <el-button type="primary" @click="alterTable(bjCZ)">确 定</el-button>
                </span>
            </el-dialog>
<!--            添加餐桌的模态框-->
            <el-dialog
                    title="添加餐桌"
                    :visible.sync="dialogVisible1"
                    width="30%"
                    >
                <el-form :model="addTableData" :rules="rules" :ref="addTableData">
                    <el-form-item label="餐桌类型：" prop="ruType">
                        <el-select v-model="addTableData.addType" placeholder="请选择">
                            <el-option
                                    v-for="item in czType"
                                    :label="item.name"
                                    :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="批量添加:" prop="num">
                        <el-col :span="12" :offset="1">
                            <el-input v-model="addTableData.addNum"></el-input>
                        </el-col>
                        <div>个</div>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addTable(addTableData)">确 定</el-button>
                </span>
            </el-dialog>
            <div class="head">
                <div>
                    <el-button type="primary" @click="dialogVisible1 = true" icon="el-icon-plus">添加餐桌</el-button>
                </div>
                <div style="display: flex">
                    <el-select v-model="value" placeholder="请选择" @change="currentSel">
                        <el-option
                                v-for="item in czType"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            label="桌号"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.tableNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="类型编号">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.typeId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="桌名">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="可就餐">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.state }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="alterModel(scope.row)" class="pgex"></el-button>
                            <el-popconfirm
                                    title="确认删除？"
                                    confirmButtonText='确定'
                                    cancelButtonText='取消'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    @onConfirm="delTable(scope.row.tableNum)"
                            >
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle ></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :page-size="pageSize"
                            :pager-count="5"
                            :current-page="currentPage"
                            :page-sizes="[3, 5, 8, 10]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="桌位类型" name="second">
            <el-dialog
                    title="添加餐桌类型"
                    :visible.sync="dialogVisible2"
                    width="30%"
            >
                <el-form :model="addType" :rules="rulesType" :ref="addType">
                    <el-form-item label="类型名称：" prop="typeName">
                        <el-col :span="15">
                            <el-input v-model="addType.typeName" placeholder="A/B/C"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="可就餐人数:" prop="max">
                        <el-col :span="7">
                            <el-input v-model="addType.min"></el-input>
                        </el-col>
                        <el-col :span="1">
                            <div>~</div>
                        </el-col>
                        <el-col :span="7">
                            <el-input v-model="addType.max"></el-input>
                        </el-col>
                        <div>人</div>
                    </el-form-item>
                    <el-form-item label="预计等待时间:" prop="waitTime">
                        <el-col :span="11">
                            <el-input v-model="addType.waitTime" placeholder="A/B/C"></el-input>
                        </el-col>
                        <el-col :span="2">
                            <div>分钟</div>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="addCZType(addType)" >确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog
                    title="编辑桌位类型"
                    :visible.sync="dialogVisible4"
                    width="30%"
            >
                <el-form >
                    <el-form-item label="类型名称：" prop="ruType">
                        <el-col :span="15">
                            <el-input v-model="bjName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="可就餐人数:" prop="name">
                        <el-col :span="7">
                            <el-input v-model="min"></el-input>
                        </el-col>
                        <el-col :span="1">
                            <div>~</div>
                        </el-col>
                        <el-col :span="7" >
                            <el-input v-model="bjMax"></el-input>
                        </el-col>
                        <el-lable>人</el-lable>
                    </el-form-item>
                    <el-form-item label="预计等待时间:">
                        <el-col :span="11">
                            <el-input v-model="bjWaitTime"></el-input>
                        </el-col>
                        <el-col :span="2">
                            <div>分钟</div>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="saveBJType()" >确 定</el-button>
                </span>
            </el-dialog>

            <div class="head">
                <div>
                    <el-button type="primary" @click="dialogVisible2=true" icon="el-icon-plus">添加类型</el-button>
                </div>
            </div>
            <div>
                <el-table
                        :data="czType.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            label="餐桌ID"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="餐桌类型名称"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="人数">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.diners }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="预计等待时间">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.waitTime }}分钟</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope" >
                            <el-button type="primary" icon="el-icon-edit" circle @click="bjzwType(scope.row)" class="pgex"></el-button>
                            <el-popconfirm
                                    title="确认删除？"
                                    confirmButtonText='确定'
                                    cancelButtonText='取消'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    @onConfirm="delType(scope.row.id)"
                            >
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle ></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :page-size="pageSize"
                            :pager-count="5"
                            :current-page="currentPage"
                            :page-sizes="[3, 5, 8, 10]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="czType.length">
                    </el-pagination>
                </div>
            </div>

        </el-tab-pane>
        <el-tab-pane label="实时状态" name="third">
            <div class="head-shi">
<!--                <div class="shi-ka">-->
<!--                    <span>日期：</span>-->
<!--                    <el-date-picker-->
<!--                            v-model="value1"-->
<!--                            type="date"-->
<!--                            placeholder="选择日期">-->
<!--                    </el-date-picker>-->
<!--                </div>-->
                <div class="shi-ka">
                    <span style="width: 50px">状态：</span>
                    <el-select v-model="state" placeholder="请选择">
                        <el-option
                                v-for="item in states"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="shi-ka">
                    <el-button type="primary" @click="saixuan" icon="el-icon-search" plain>筛选</el-button>
                </div>

            </div>
            <div class="sea">
                <div ><label>空桌</label> <span class="ba-zhuang" style="background-color: #0c83e2"></span> <label>共{{emptyTableNum}}桌</label></div>
                <div ><label>已预约</label> <span class="ba-zhuang" style="background-color: #a6a0fd"></span> <label>共{{makeNum}}桌</label></div>
                <div ><label>正在用餐</label> <span class="ba-zhuang" style="background-color: #ffa3a8"></span> <label>共{{repastNum}}桌</label></div>
            </div>
            <div class="sszt">
            <div  v-for="(data) in tableData1">
                <div class="kzstyle kzCor" v-if="data.state === '空桌' ">
                    <div class="stTou">餐桌名称：{{data.name}}{{data.tableNum}}</div>
                    <div class="stxia">
                        <p>可坐：1-5人</p>
                        <p>状态：{{data.state}}</p>
                    </div>
                </div>
                <div class="kzstyle ydCor" v-else-if="data.state === '预约' ">
                    <div class="stTou">餐桌名称：{{data.name}}{{data.tableNum}}</div>
                    <div class="stxia">
                        <p>可坐：1-5人</p>
                        <p>状态：{{data.state}}</p>
                    </div>
                </div>
                <div class="kzstyle zzCor" v-else>
                    <div class="stTou">餐桌名称：{{data.name}}{{data.tableNum}}</div>
                    <div class="stxia">
                        <p>可坐：1-5人</p>
                        <p>状态：{{data.state}}</p>
                    </div>
                </div>
            </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    import qs from 'qs'
    export default {
        data() {
            return {
                tabPosition:'left',
                addType:{
                    typeName:'',
                    min:1,
                    max:2,
                    waitTime:30,
                },
                addTableData: {
                    addType:'大大桌',
                    addNum:'4'
                },
                pageSize:5,
                currentPage:1,
                bjCZ:{
                    type:'',
                    name:'',
                    id:''
                },
                typeName:'',
                min:1,
                max:2,
                waitTime:30,
                bjName:'',
                bjMax:'',
                bjWaitTime:'',
                bjId:'',
                dialogVisible1:false,
                dialogVisible2:false,
                dialogVisible3:false,
                dialogVisible4:false,
                activeName: 'first',
                value: '',
                czType: [],
                tableData: [],
                tableData1: [],
                value1:'',
                states:['就餐中','预约','空桌'],
                state:'',
                emptyTableNum:0,
                makeNum:0,
                repastNum:0,
                rules:{
                    ruType: [
                        { required: true, message: '请选择餐桌类型', trigger: 'blur' }
                    ],
                    num:[
                        { required: true, message: '请输入添加数量', trigger: 'blur' },
                    ]
                },
                rulesType:{
                    typeName:[
                        { required: true, message: '请输入类型名称', trigger: 'blur' }
                    ],
                    min:[
                        { required: true, message: '请输入最低人数', trigger: 'blur' },
                        {min:1,message: '最低人数不能少于1人'}
                    ],
                    max:[
                        { required: true, message: '请输入最多人数', trigger: 'blur' },
                    ],
                    waitTime:[
                        { required: true, message: '请等待时间', trigger: 'blur' },
                    ]
                }
            };
        },
        methods: {
            getCZType:function () {
                this.$axios.post('/diningTable/zwlx').then(datas =>{
                    this.czType.length = 0;
                    datas.data.forEach(type=>{this.czType.push(type)})
                })
            },
            getTableData:function () {
                this.$axios.post('/diningTable/czlb').then(datas=>{
                    this.emptyTableNum = 0;
                    this.makeNum = 0;
                    this.repastNum = 0;
                    this.tableData.length = 0;
                    datas.data.forEach(data=>{
                        this.tableData.push(data);
                        if(data.state === '空桌'){
                            this.emptyTableNum++;
                        }else if(data.state === '预约'){
                            this.makeNum++;
                        }else if(data.state === '就餐中'){
                            this.repastNum++;
                        }
                    })
                    this.tableData1 = this.tableData;
                })
            },
            delTable(id){
                console.log(id);
                var params = new URLSearchParams;
                params.append("id",id);
                this.$axios.post('/diningTable/delTable',params).then((reulst)=>{
                    console.log(reulst.data);
                    if(reulst.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('删除失败');
                    }
                })
            },
            alterTable(data){
                this.dialogVisible3 = false;
                var params = new URLSearchParams;
                params.append("id",data.id);
                params.append("name",data.name);
                params.append("type",data.type);
                this.$axios.post('/diningTable/alterTable',params).then((reulst)=>{
                    console.log(reulst.data)
                    if(reulst.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('编辑失败');
                    }
                })

            },
            alterModel(row){
                this.dialogVisible3 = true;
                this.bjCZ.id = row.tableNum;
                this.bjCZ.name = row.name;
                // this.bjCz.type = row.
            },
            addTable(formName){
                // this.$refs[formName].validate((valid) => {
                //     if (valid) {
                //         alert('submit!');
                //     } else {
                //         console.log('失败');
                //         return false;
                //     }
                // });
                this.dialogVisible1 = false;
                var params = new URLSearchParams;
                params.append("type",this.addTableData.addType);
                params.append("addNum",this.addTableData.addNum);
                this.$axios.post('/diningTable/addTable',params).then((reulst)=>{
                    console.log(reulst.data)
                    if(reulst.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '添加餐桌成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('添加失败');
                    }
                });
            },
            addCZType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        this.dialogVisible2 = false;
                        var params = new URLSearchParams;
                        params.append("typeName",this.addType.typeName);
                        params.append("max",this.addType.max);
                        params.append("waitTime",this.addType.waitTime);
                        this.$axios.post('/diningTable/addCZType',params).then((reulst)=>{
                            console.log(reulst.data)
                            if(reulst.data == true){
                                this.$router.go(0);
                                this.$message({
                                    message: '添加桌位类型成功',
                                    type: 'success'
                                });
                            }else {
                                this.$message.error('添加失败');
                            }
                        })
                        this.activeName = 'second';
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            delType(id){
                console.log(id);
                var params = new URLSearchParams;
                params.append("id",id);
                this.$axios.post('/diningTable/delType',params).then((reulst)=>{
                    console.log(reulst.data)
                    if(reulst.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('删除失败');
                    }
                    this.activeName = 'second';
                })
            },
            bjzwType(data){
                this.dialogVisible4 = true;
                this.bjId = data.id;
                this.bjName = data.name;
                this.bjMax = data.diners;
                this.bjWaitTime = data.waitTime;
            },
            saveBJType(){
                this.dialogVisible4 = false;
                var params = new URLSearchParams;
                params.append("id",this.bjId);
                params.append("name",this.bjName);
                params.append("max",this.bjMax);
                params.append("waitTime",this.bjWaitTime);
                this.$axios.post('/diningTable/alterType',params).then((reulst)=>{
                    console.log(reulst.data);
                    if(reulst.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('编辑失败');
                    }
                })
                this.activeName = 'second';
            },
            renderState(){

            },
            currentSel(){
                var params = new URLSearchParams;
                params.append("type",this.value);
                this.$axios.post('/diningTable/queryByType',params).then((datas)=>{
                    this.tableData.length = 0;
                    datas.data.forEach(data=>{
                        this.tableData.push(data);
                    })
                })
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变当前页数
                this.currentPage= val
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            saixuan(){
                this.tableData1 = this.tableData.filter(this.checkState)
            },
            checkState(data){
                return data.state == this.state;
            },
            handleClick(tab){
                if(tab.paneName =='third'){
                    this.tableData1 = this.tableData;
                }
            }

        },
        mounted:function () {
            this.getCZType();
            this.getTableData();
        }
    };
</script>

<style scoped>
    /*设置scoped，只对当前组件样式起作用*/
    @import "../style/diningTalbe.css";
</style>